<template>
	<view style="height:100vh;background-color:#333;">
		<view style="height:50rpx;"></view>
		<view class="topBackground">
			<view class="userHeadPic" :style="'background-image:url('+userInfo.WxHeadPic+')'"
				@click="goPage('/myPages/pages/mypage?artisterID='+userInfo.UserID)"></view>
			<view style="max-width: 400rpx;margin-left: 20rpx;">
				<view
					style="font-size:32rpx;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
					{{ userInfo.NickName }}
				</view>
				<view style="font-size:24rpx;color:#999">开通会员享更多权益</view>
				<view v-if="userInfo.UserLevelID > 0" style="font-size:24rpx;color:#666">
					会员到期时间：{{ userInfo.LastEndTime }}</view>
			</view>
		</view>
		<view class="flexbc" style="padding:40rpx;">
			<view class="vipIcons">
				<view class="vipIcon">
					<image :src="baseUrl + 'icon/a-Frame1.png'" mode="widthFix"></image>
				</view>
				<text>会员福利</text>
			</view>
			<view class="vipIcons">
				<view class="vipIcon">
					<image :src="baseUrl + 'icon/danbaofangshi.png'" mode="widthFix"></image>
				</view>
				<text>免担保金</text>
			</view>
			<view class="vipIcons">
				<view class="vipIcon">
					<image :src="baseUrl + 'icon/qiandao2.png'" style="width:60%" mode="widthFix"></image>
				</view>
				<text>每日可签到</text>
			</view>
			<view class="vipIcons">
				<view class="vipIcon">
					<image :src="baseUrl + 'icon/huiyuan3.png'" mode="widthFix"></image>
				</view>
				<text>会员标识</text>
			</view>
		</view>
		<view style="background-color:#f0f0f0;border-radius:50rpx;;">
			<view class="flexbc" style="padding:30rpx;">
				<view class="priceBox" v-for="(item,index) in BuyMemberSet" :key="index" @click="changeSelect(index)"
					:style="{border:(currentSelect == index?'1rpx solid #FF9900':'1rpx solid #FFF')}">
					<view class="priceTitle">{{item.title}}</view>
					<view class="price">￥{{item.price*100/100}}</view>
					<view class="yuanPrice">送{{item.money*100/100}}金币</view>
				</view>
			</view>
			<view style="padding:20rpx;padding-bottom:0rpx;padding-top:0rpx">服务权益</view>
			<view style="margin:20rpx;background-color:#FFF;border-radius:20rpx 20rpx 0rpx 0rpx;padding:15rpx;">
				<table class="table">
					<tr class="header">
						<td>功能特权</td>
						<td>非会员</td>
						<td class="member">会员</td>
						<td class="vip">VIP</td>
					</tr>
					<tr>
						<td>会员醒目标识</td>
						<td>无</td>
						<td class="member">有标识</td>
						<td class="vip">醒目VIP标识</td>
					</tr>
					<tr>
						<td>艺人隐私相册</td>
						<td>无法查看</td>
						<td class="member">无法查看</td>
						<td class="vip">全部可见</td>
					</tr>
					<tr>
						<td>联系艺人发起沟通</td>
						<td>不可以</td>
						<td class="member">可以</td>
						<td class="vip">可以</td>
					</tr>
					<tr>
						<td>极速联系艺人</td>
						<td>88金币</td>
						<td class="member">58金币</td>
						<td class="vip">18金币</td>
					</tr>
					<tr>
						<td>发布通告和约拍</td>
						<td>不可以</td>
						<td class="member">可发多数类型</td>
						<td class="vip">可发全部类型</td>
					</tr>
				</table>
			</view>
			<view style="padding:30rpx;">
				<view style="font-size:28rpx;color:#000;">温馨提示:</view>
				<view style="font-size:24rpx;color:#666;margin-top:10rpx;">
					1.会员为本平台向您提供的会员增值服务，充值成功后不支持转让，不支持退款，充值前请慎重选择。<br>2.不鼓励未成年人使用充值服务。
				</view>
				<view style="margin-top:20rpx;font-size:24rpx;color:#FF6600;display: flex;align-items: center;">
					<checkbox-group @change="onIsChecked">
						<checkbox value="Checkbox" style="transform: scale(0.7,0.7);" :checked="isCheckbox"></checkbox>
						<!-- <checkbox value="Checkbox" style="transform:scale(0.7)" /> -->
					</checkbox-group>
					<!-- <uni-data-checkbox v-model="isCheckbox" multiple selectedColor="#FF6600"/> -->
					<text style="margin-left:10rpx" @click="goAgreement">同意《充值用户协议》</text>
				</view>
			</view>
			<view style="clear:both;height:100rpx;"></view>
		</view>
		<view class="rechargeHandle" @click="rechargeHandle">
			立即开通 {{ BuyMemberSet[currentSelect].title }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userRole: {},
				userCount: {},
				currentType: 5,
				currentSelect: 3,
				BuyMemberSet: [],
				isCheckbox: false,
				baseUrl: ''
			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.getBuyMember();
		},
		methods: {
			onIsChecked(event) {
				// console.log(event.detail.value.length != 0)
				// console.log( event.detail.value[0])
				if (event.detail.value.length != 0 && event.detail.value[0] == 'Checkbox') {
					// console.log('执行1')
					this.isCheckbox = true;
				} else {
					// console.log('执行2')
					this.isCheckbox = false;
				}
				// console.log('event', event)
			},
			goAgreement() {
				// this.$common.goNavPage('/myPages/pages/agreement');
				this.$common.goNavPage('/pages/content?cid=4');
			},
			changeSelect(index) {
				this.currentSelect = index
				this.payPrice = this.BuyMemberSet[index].price
			},
			getBuyMember() {
				this.$httpost('/UserCenter/BuyMemberSet', {}).then(res => {
					// console.log('BuyMemberSet', res);
					if (res.code == 200) {
						this.userInfo = res.data.userInfo
						this.BuyMemberSet = res.data.BuyMemberSet
					}
				});
			},
			rechargeHandle() {
				// console.log('isCheckbox', this.isCheckbox)
				this.isCheckbox = true;
				// if (!this.isCheckbox) {
				// 	uni.showToast({
				// 		title: '请仔细查看充值用户协议，并同意！',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				// console.log('rechargeHandle', this.userInfo.UserLevelID)

				if (this.currentSelect == -1) {
					uni.showToast({
						title: '请选择',
						icon: 'error'
					})
				} else {

					let timeStamp = new Date().getTime();
					let LastEndTime = new Date(this.userInfo.LastEndTime).getTime();

					if (this.userInfo.UserLevelID == 2 && timeStamp < LastEndTime) {

						let msgtitle = '';
						// console.log(this.currentSelect, timeStamp, LastEndTime);
						if (this.currentSelect == 3) {
							msgtitle = '您现在已是VIP会员，且尚未到期，您确定要续期？'
						} else {
							msgtitle = '您现在已是VIP会员，且尚未到期，确定要降级续期？'
						}
						let _that = this;
						uni.showModal({
							title: msgtitle,
							confirmText: '确定续期',
							cancelText: '先不续期',
							success(res) {
								if (res.confirm) {
									_that.Payment()
								} else {
									return false
								}
							}
						})
					} else {
						this.Payment()
					}

				}
			},
			Payment() {
				let _that = this;

				// _that.PaymentOk(1,15, 'requestPayment:test');

				// return false;

				this.$httpost('/Wechat/Pay', {
					reChargeType: this.currentType,
					reChargeIndex: this.currentSelect
				}).then(res => {
					// console.log(res)

					let payConfig = res.data.config
					let payOrderID = res.data.payorderid

					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payConfig.timeStamp,
						nonceStr: payConfig.nonceStr,
						package: payConfig.package,
						signType: payConfig.signType,
						paySign: payConfig.paySign,
						success: function(payRes) {
							// console.log(payRes.errMsg);

							if (payRes.errMsg == 'requestPayment:ok') {
								_that.PaymentOk(1, payOrderID, payRes.errMsg);
							} else {
								_that.PaymentOk(2, payOrderID, payRes.errMsg);
							}
						},
						fail: function(err) {
							// console.log(err);
							_that.PaymentOk(4, payOrderID, err);
						}
					});

				});
			},
			PaymentOk(state, payOrderID, errMsg) {
				// console.log('payOrderID', payOrderID);

				this.$httpost('/Wechat/PayResult', {
					payState: state,
					payOrderID: payOrderID,
					errMsg: errMsg
				}).then(res => {
					// console.log('PayResult', res)

					if (res.code === 200) {

						if (res.data.PayState === 1) {

							uni.setStorageSync("isLogin", res.data)

							uni.showModal({
								title: '恭喜您已成功购买会员，即刻享受会员权益',
								confirmText: '返回我的',
								cancelText: '返回首页',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/my/index'
										})
									}
									if (res.cancel) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
							})


						}
					}
				});
			},
			showToast() {
				let options = {}
				//提示信息
				options.text = '支付成功';
				//图标图片地址
				options.src = this.$baseUrl + "icon/success.png";
				this.$refs.toast.show(options)
			}
		}
	}
</script>

<style lang="scss">
	.topBackground {
		width: 85%;
		height: 120rpx;
		background-color: #f0f0f0;
		// background-image: url('/static/icon/integral.png');
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: 300rpx 50rpx;
		border-radius: 30rpx;
		padding: 30rpx;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;

	}

	.userHeadPic {
		// float:left;
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		background-color: #CCC;
		background-image: url('/static/icon/head.png');
		background-size: cover;
		background-position: center;
	}

	.vipIcons {
		width: 23vw;
		text-align: center;
		color: #FFF
	}

	.vipIcon {
		margin: auto;
		width: 80rpx;
		height: 80rpx;
		background-color: #FFF;
		border-radius: 50rpx;
		margin-bottom: 20rpx;
	}

	.vipIcon image {
		width: 65%;
		height: auto;
		margin: auto;
		margin-top: 13rpx;
	}

	.priceBox {
		width: 25%;
		height: 260rpx;
		padding: 20rpx;
		background-color: #FFF;
		border: 1rpx solid #e0e0e0;
		border-radius: 20rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;

		.priceTitle {
			text-align: center;
			font-size: 24rpx;
			line-height: 80rpx;
		}

		.price {
			text-align: center;
			font-size: 40rpx;
			line-height: 80rpx;
		}

		.yuanPrice {
			text-align: center;
			font-size: 24rpx;
			color: #999
		}
	}

	.priceBox.sed {
		border: 1rpx solid #FF9900
	}

	.rechargeHandle {
		position: fixed;
		z-index: 500;
		width: 100vw;
		bottom: 0rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #FFCC00;
		color: #333;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		text-align: center
	}

	.table {
		width: 100%;
		height: auto;

		tr {
			clear: both;
			height: 40rpx;

			td {
				width: 25%;
				float: left;
				font-size: 20rpx;
				text-align: center;
				height: 40rpx;
				line-height: 40rpx;
				white-space: nowrap;
				color: #666
			}

			td.member {
				background-color: #FFFFCC;
			}

			td.vip {
				background-color: #FFEECC;
			}
		}

		tr.header {
			font-size: 28rpx;
			font-weight: 600;
			color: #000;
		}
	}

	// .table tr {
	// 	clear:both;
	// }
	// .table tr td {
	// 	width: 20%;
	// 	float:left;
	// }
</style>